﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <title>新方向</title>
    <link rel="stylesheet" href="css/ydui.css">
    <link rel="stylesheet" href="css/style.css">
    <script src='js/adaption.js'></script>

</head>

<body>
    <div class="body-content">
        <div class="banner thumbnail">
            <i class="back icon-back"></i>
            <img src="images/banner.png" alt="XX课程">
            <!-- video-box -->
            <div class="video-box">
                <div class="video-bg" style="background-image: url('images/banner.png')"></div>
                <video id="course-video" src="" controls></video>
            </div>
            <!-- video-box END-->
        </div>
        <!--课程头部信息-->
        <div id="model-course-top">
            <section class="course-top-box">
                <div class="course-name">
                    <h2>课程名称课程名称课程名称</h2>
                    <i class="icon-collect"></i>
                </div>
                <p class="tips">副标题副标题副标题</p>
                <p class="tips">
                    <span>讲师：张大力</span>
                    <span>课节数：9999</span>
                </p>
            </section>
        </div>

        <div class="section tab">
            <div class="tab-box">
                <ul class="tab-tit clearfix">
                    <li class="active">课程详情</li>
                    <li>课程列表</li>
                </ul>
            </div>
        </div>
        <!--内容区-->
        <div class="content-box">
            <!--tab=======课程详情-->
            <div class="tab-con tab-course-box active">

                <div id="model-course-middle">
                    <!--授课老师-->
                    <div class="section border-bot">
                        <div class="intro-tit">授课老师</div>
                        <div class="intro-box intro-teacher">
                            <div class="teacher-info-top">
                                <div class="avatar" style="background-image: url('images/avatar.jpg')"></div>
                                <div class="teachers-top-info">
                                    <h3>蔡琴</h3>

                                    <div class="teachers-infos grey">
                                        <p>前《故事大王》编辑总监</p>
                                        <p>多年写作教育经验，现任小学写作协会</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--所含服务项目-->
                    <div class="section-nomal border-bot">
                        <div class="intro-tit">所含服务项目</div>
                        <div class="course-intro grey">
                            <ul>
                                <li>1，为学员寻师父</li>
                                <li>2，陈大力老师陈大力老师</li>
                                <li>3，陈大力老师陈大力老师</li>
                                <li>4，陈大力老师陈大力老师</li>
                            </ul>
                        </div>
                    </div>

                    <!--课程特色-->
                    <div class="section-nomal border-bot">
                        <div class="intro-tit">课程特色</div>
                        <div class="course-intro grey">
                            <ul>
                                <li>1，为学员寻师父</li>
                                <li>2，陈大力老师陈大力老师</li>
                                <li>3，陈大力老师陈大力老师</li>
                                <li>4，陈大力老师陈大力老师</li>
                            </ul>
                        </div>
                    </div>

                </div>

            </div>

            <!--tab=======课程目录-->
            <div class="section tab-con tab-menu-box">
                <p class="tCenter tips">授课方式：线下试听</p>
                <ol class="course-menu-lists" data-courseid="10110">
                    <!-- <li>
                        <p>社会主义核心价值观论</p>
                    </li>
                    <li>
                        <p>三年高考五年模拟</p>
                    </li>
                    <li>
                        <p>随便五个字</p>
                    </li>
                    <li>
                        <p>很多很多字的课程名字放在这里会怎样呢不知道呢看看吧</p>
                    </li>
                    <li>
                        <p>社会主义核心价值观论</p>
                    </li>
                    <li>
                        <p>三年高考五年模拟</p>
                    </li> -->
                </ol>
            </div>

            <!--立即购买-->
            <div class="to-buy">
                <p class="price">¥ 1180</p>
                <button type="button" class="login-btn" id="buy-btn">立即购买</button>
                <button type="button" class="ripple big-btn" id="playvideo-btn" data-courseid="c10"><span id="toplay">播放视频</span></button>
            </div>
        </div>
    </div>

    <!--登录框-->
    <div class="overlay"></div>

    <div class="login-box">
        <div class="login-tip-title">还没登录 请先登录</div>
        <form action="">
            <div class="login-input">
                <div class="input-group">
                    <label for="user-phone">手机号码：</label>
                    <input type="number" id="user-phone" placeholder="请输入正确的手机号码">
                </div>
                <div class="input-group">
                    <label for="checkcode">验证码：</label>
                    <input type="text" id="checkcode" placeholder="请输入验证码">
                    <button type="button" id="capcha-btn">获取验证码</button>
                </div>
                <p class="tips">温馨提示：未注册的手机号，登录时将自动注册，且代表您已同意
                    <span class="open-agreement">《用户协议》</span>
                </p>
            </div>

            <div class="login-button-box">
                <button type="button" class="no-btn" id="cancel">取消</button>
                <button type="button" class="yes-btn" id="login">登录</button>
            </div>
        </form>
    </div>
    <!--登录框END-->

    <!--用户协议-->
    <div class="agreement">
        <div class="agreement-tip-title">还没登录 请先登录</div>
        <div class="agreement-content">
            <p>
                经本站注册系统完成注册程序并通过身份认证的用户即成为正式用户，可以获得本站规定用户所应享有的一切权限；未经认证仅享有本站规定的部分会员权限。保宝网有权对会员的权限设计进行变更。
            </p>
            <p>
                用户只能按照注册要求使用真实姓名，及身份证号注册。用户有义务保证密码和帐号的安全，用户利用该密码和帐号所进行的一切活动引起的任何损失或损害，由用户自行承担全部责任，本站不承担任何责任。如用户发现帐号遭到未授权的使用或发生其他任何安全问题，应立即修改帐号密码并妥善保管，如有必要，请通知本站。因黑客行为或用户的保管疏忽导致帐号非法使用，本站不承担任何责任。
            </p>
        </div>
        <div class="login-button-box">
            <button type="button" class="no-btn" id="disagree">不同意</button>
            <button type="button" class="yes-btn" id="agree">同意</button>
        </div>

    </div>
    <!--用户协议END-->
    <script src="js/arttemplate.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/ydui.js"></script>
    <script src="js/login.js"></script>
    <script src="js/main.js"></script>

    <!-- 课程列表 -->
    <script type="text/html" id="courseMenu">
        {{each data as value}}
        <li>
            <p>{{value.coursename}}</p>
        </li>
        {{/each}}
    </script>
    <!-- 课程列表 END-->

    <script>
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        
        $(function () {
            var dialog = YDUI.dialog;

            /*banenr*/
            (function () {
                var $banner = $(".banner"),
                    rate = 16 / 9;
                var oWith = $banner.width(),
                    oHeight = (oWith / rate).toFixed(2);
                $banner.height(oHeight);
            })();

            /********收藏*****/
            var $collect = $("#model-course-top .icon-collect");
            $collect.on('touchstart', function () {
                var self = $(this),
                    isCollect = !(self.hasClass('icon-active'));
                console.log(isCollect);
                $.ajax({
                    url: '',
                    type: 'get',
                    data: { 'isCollect': isCollect },
                    success: function () {
                        self.toggleClass("icon-active");
                    },
                    error: function () {
                        dialog.alert('操作失败，请检查网络后重试！');
                    }
                })

            })



            var page = 1, pageSize = 5, flagWaterFall = true;
            //tab切换
            var $tabTit = $(".tab-tit li"),
                $tabCon = $(".content-box .tab-con");
            $tabTit.on('click', function () {
                var _index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $tabCon.eq(_index).addClass('active').siblings().removeClass('active');
                if (_index == 1) {
                    waterfall();
                } else {
                    $(window).off('scroll');
                }
            });
            // 课程列表
            function waterfall() {
                var classli = $(".course-menu-lists");
                var winHeight = $(window).height(), initDocHeight = $(document).height();
                if (winHeight = initDocHeight) {
                    console.log("----init waterFall----");
                    getClass({
                        data: {
                            courseid: classli.data('courseid'),
                            page: page,
                            pageSize: pageSize
                        }
                    })
                }
                $(window).on('scroll', function () {
                    var liHeight = classli.height(),
                        docHeight = $(document).height(),
                        oscrollTop = $(window).scrollTop();
                    //console.log(oscrollTop, docHeight, winHeight)

                    if ((oscrollTop + winHeight >= docHeight) && flagWaterFall) {
                        console.log("----scroll waterFall----");
                        getClass({
                            data: {
                                courseid: classli.data('courseid'),
                                page: page,
                                pageSize: pageSize
                            }
                        })
                    }
                });
                function getClass(opt) {
                    console.log(opt.data);
                    if (flagWaterFall) {
                        $.ajax({
                            url: 'https://www.easy-mock.com/mock/5b0266d995118136368f1a78/',
                            type: 'get',
                            data: opt.data,
                            success: function (res) {
                                dialog.loading.close();
                                //console.log(res.data,res.data.length);
                                var dataLen = res.data.length, html = '';
                                var oHtml = template('courseMenu', res);
                                classli.append(oHtml);
                                if (dataLen < pageSize) {
                                    dialog.toast('已加载全部课节', 'none', 900);
                                    flagWaterFall = false;
                                } else {
                                    flagWaterFall = true;
                                }
                                page++;
                                console.log(page);
                            },
                            error: function () {
                                dialog.loading.close();
                                flagWaterFall = true;
                            }
                        });
                    }
                }
            }

            /****播放视频*/
            var $videoBox = $(".video-box"),
                $playVideo = $("#playvideo-btn"),
                videoEle = document.querySelector("#course-video"),
                getVideoFlag = true,
                toPlay = false;

            var videoList = [];
            var curr = 0;//当前视频索引值
            $playVideo.on('click', function () {
                videoEle.play();
            });
            $playVideo.on('click', '#toplay', function () {
                var $self = $playVideo,
                    datas = {
                        courseid: $self.data('courseid')
                    };
                if (toPlay) {
                    videoEle.play();
                }
                getVideos(datas);
            });
            /*点击课时切换视频*/
            var classLi = $(".course-menu-lists");
            classLi.on("click", "li", function () {
                curr = $(this).index();

                function getVideoTime() {
                    if(curr==0){
                        var curtime=this.currentTime;
                        console.log(curtime);
                        if(curtime>=10){
                            dialog.confirm('当前课程试看结束，继续观看请点击确认进行购买！', function () {
                                dialog.toast('进入购买', 'none', 1000);
                            });
                            this.currentTime=0;
                            this.pause();
                        }
                    }
                }
                videoEle.addEventListener("timeupdate",getVideoTime);
                var $self = $playVideo,
                    datas = {
                        courseid: $self.data('courseid')
                    };
                getVideos(datas)
            })


            //获取播放列表
            function getVideos(datas) {
                if (getVideoFlag) {
                    dialog.loading.open('正在查找播放资源，请稍后...');
                    $.ajax({
                        url: '',
                        type: 'get',
                        data: datas,
                        success: function (res) {
                            dialog.loading.close();

                            videoList = ['https://al-qn-echo-video-cdn.app-echo.com/mp41/823cf86fd1fdbad5babd8446c4c7d81b67b1f11f78e74c14e6a053599c341af273e675c4.mp4?1533606861', 'https://al-qn-echo-video-cdn.app-echo.com/mp41/f15f1387be378cebd6c71fd11528d1f2a6108cf13ece8bdd17ec4595bc2e1a22e013726c.mp4?1531363167', 'https://al-qn-echo-video-cdn.app-echo.com/mp41/fb019ff68c94be117b1a4cd4ba05d943f473098d7289780f45585076f178ddd928e5e123.mp4?1526020861',''];
                            getVideoFlag = false;
                            videoPlay();
                        },
                        error: function () {
                            dialog.loading.close();
                            dialog.toast('查找资源失败，请稍后重试', 'none', 1000);
                        }

                    });
                } else {
                    videoPlay();
                }
            }
            //连续播放
            function videoPlay() {
                console.log("视频列表和当前视频索引值:",videoList, curr);
                var vLen = videoList.length;
                if (curr >= vLen || videoList[curr] == '') {
                    dialog.toast('当前课时暂无课程视频', 'none', 1000);
                    return false;
                }
                if (vLen > 0) {
                    $playVideo.attr('disabled', 'disabled');
                    $videoBox.fadeIn();
                    videoEle.src = videoList[curr];
                    //videoEle.load();
                    videoEle.play();
                    videoEle.addEventListener('ended', function () {
                        curr++;
                        if (curr >= vLen) {
                            curr = 0;
                        }
                        videoEle.src = videoList[curr];
                        //videoEle.load();
                        videoEle.play();
                    });

                    videoEle.addEventListener('pause', function () {
                        console.log('video paused');
                        $playVideo.removeAttr('disabled');
                        toPlay = true;
                    });

                } else {
                    dialog.toast('暂无课程视频', 'none', 1000);
                }

            }




        });


    </script>
</body>

</html>